<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>localStorage</title>
	<style>
		*{margin:0;padding:0;}
		li{
			list-style: none;
		}
		body{
			background-color: #cdcdcd;
		}
		.top{
			background-color: rgb(47,47,47,0.98);
			height:50px;
		}
		.centent{
			width:600px; 
			padding:0 10px;
			margin:0 auto;
		}
		.top span{
			font-size: 24px;
			color:#FFF;
			cursor: pointer;
			line-height: 50px;
			float: left;
		} 
		.topinput{
			float: right;
		    width: 60%;
		    height: 24px;
		    margin-top: 12px;
		    text-indent: 10px;
		    border-radius: 5px;
		    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
		    border: none;
		}
		li{
		    height: 32px;
		    line-height: 32px;
		    background: #fff;
		    position: relative;
		    margin-bottom: 10px;
		    padding: 0 45px;
		    border-radius: 3px;
		    border-left: 5px solid #629A9C;
		    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
		    position: relative;
		}
		p{
			display: inline-block;
		}
		.pinput{
		    position: absolute;
		    top: 5px;
		    left: 10px;
		    width: 22px;
		    height: 22px;
		    cursor: pointer;
		}
		a{
			position: absolute;
		    top: 2px;
		    right: 5px;
		    display: inline-block;
		    width: 14px;
		    height: 12px;
		    border-radius: 14px;
		    border: 6px double #FFF;
		    background: #CCC;
		    line-height: 14px;
		    text-align: center;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 14px;
		    cursor: pointer;
		}
		h2{
			margin: 20px 0;
			position: relative;
		}
		h2 i{
			position: absolute;
		    top: 2px;
		    right: 5px;
		    display: inline-block;
		    padding: 0 5px;
		    height: 20px;
		    width: 10px;
		    border-radius: 20px;
		    background: #E6E6FA;
		    line-height: 22px;
		    text-align: center;
		    color: #666;
		    font-size: 14px;
		    font-style: normal;
		}
		ol li{
			opacity:0.5;
		}
		.toli{
			display: none;
		}
		.doli{
			display: none;	
		}
	</style>
</head>
<body>
	<div class="top">
		<div class="centent">
			<span>ToDoList</span>
			<input type="text" class="topinput" placeholder="添加ToDo">
		</div>
	</div>
	<div class="wrap">
		<div class="centent">
			<h2>正在进行<i class="toi"></i></h2>
			<ul class="liList">
				<li class="toli"><input type="checkbox" class="pinput"><p>dsfdf</p><a href="#">-</a></li>>
			</ul>
			<h2>已经完成<i class="doi"></i></h2>
			<ol>
				<li class="doli"><input type="checkbox" class="pinput"><p>dsfdf</p><a href="#">-</a></li>>
			</ol>
		</div>
	</div>
	<script src="jquery.min.js"></script>
	<script>
		$(".doi").html($("ol > li").length - 1)
		$(".toi").html($("ul > li").length - 1)	
		$(".topinput")[0].onkeydown = function(e){
			if(e.keyCode == 13){
				newli = $(".toli").clone(true)
				newli.removeClass("toli")
				newli.find("p").html(this.value)
				$(".liList").append(newli)
			}
			var ili = $("ul > li").length - 1
			$(".toi").html(ili)
		}
		$(".pinput").click(function(){
			  	clnli = $(this).closest("li")
			  	clnli.removeClass("doli")
			if((clnli.find("input").prop("checked")) == true){
			  $("ol").append(clnli)
			}
			else{
				clnli.prop("checked",false)
				$("ul").append(clnli)
			}
			var ili = $("ul > li").length - 1
			$(".toi").html(ili)
			var dli = $("ol > li").length - 1
			$(".doi").html(dli)
		})
		$("a").click(function(){
			 var clearli = $(this).closest("li")
			 clearli.remove()
			 var ili = $("ul > li").length - 1
			$(".toi").html(ili)
			var dli = $("ol > li").length - 1
			$(".doi").html(dli)
		})
	</script>
</body>
<html>
